<template>
  <div>
  <el-tree 
  :data="menus"
  :props="defaultProps" 
  :expand-on-click-node="false"
  show-checkbox
  node-key="catId"
  :default-expanded-keys="expandedKey"
  >
   <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span style="margin-left:10px">
           <el-button
            type="text"
            size="mini"
            v-if="node.level <=2"
            @click="()=>append(data)">
            Append
          </el-button>
           <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            edit
          </el-button>
          <el-button
            type="text"
            size="mini"
            v-if="node.childNodes.length==0"
            @click="() => remove(node, data)"
            >
            Delete
          </el-button>
          </span>
        </span>
      </template>
  </el-tree>
  <!-- 对话框 -->
  <el-dialog :title="title" :visible.sync="dialogVisible"  :close-on-click-modal="false">
       <el-form :model="category">
    <el-form-item label="分类名称">
      <el-input v-model="category.name" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="分类图标">
      <el-input v-model="category.icon" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="计量单位">
      <el-input v-model="category.productUnit" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData">确 定</el-button>
  </div>
</el-dialog>
</div>

</template>

<script>
import { Message } from 'element-ui'
import {CategoryTree,removeIds,addCategory,getCategory,updateCategory} from '@/api/index'
export default {
 data() {
    return {
      title:"",
      dialogType:"",//add edit
      // 对象
      category:{
        catId:null,
        name:"",
        parentCid:0,
        catLevel:0,
        showStatus:1,
        sort:0 ,
        icon:"",
        productUnit:0
      },
      // 对话框
      dialogVisible: false,
      expandedKey:[],
      menus: [],
      defaultProps: {
        children: 'goodsTypeList',
        label: 'name'
        }
      };
    },
    // 在页面加载完成后，就调用该函数
    created(){
       this.getCategoryTree();
    },
    methods: { 
    submitData(){
        console.log(this.dialogType)
        if(this.dialogType=="add"){
          this.addCategory();
        }
        if(this.dialogType=="edit"){
          this.editCategory();
        }
      },
      editCategory(){
        let{name,icon,productUnit,catId}= this.category;
        var data={name:name,icon:icon,productUnit:productUnit,catId:catId};
         updateCategory(data).then(res=>{
            if(res.code==200){
              this.$message.success("修改成功");
              this.getCategoryTree();
              this.dialogVisible=false
              this.expandedKey=[this.category.parentCid];
            }
         })
      },
      edit(data){
        console.log(data)
         this.dialogType="edit";
        this.title="修改分类";
        getCategory(data.catId).then(res=>{
            console.log(res)
            this.category.catId=res.data.category.catId;
            this.category.name=res.data.category.name;
            this.category.icon=res.data.category.icon;
            this.category.productUnit=res.data.category.productUnit;
            this.category.parentCid=res.data.category.parentCid;
        })
        this.dialogVisible=true
        this.category.name=data.name
      },
      addCategory(){
        addCategory(this.category).then(res=>{
           if(res.code==200){
              this.$message.success("添加商品分类成功");
              this.dialogVisible=false;
              this.getCategoryTree();
              this.expandedKey=[this.category.parentCid]
           } 
        })
      },
       append(data) {
         this.dialogVisible=true;
         console.log(this.dialogVisible)
         this.title="添加分类";
         this.dialogType="add";
         this.category.name=null;
         this.category.icon=null;
         this.category.productUnit=0;
         this.category.parentCid=data.catId;
         this.category.catLevel=data.catLevel*1+1;
         console.log(data)
      },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      remove(node, data) {
        console.log(node)
        var ids=[data.catId];
        let name=data.name;
        this.$confirm('是否删除【'+name+"】", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeIds(ids).then(res=>{
          if(res.code==200){
            this.$message.success("删除成功");
            this.getCategoryTree();
            this.expandedKey=[node.parent.data.catId]
          }
       })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
     
      },
      getCategoryTree(){
        CategoryTree().then(({data})=>{
            console.log(data)
          this.menus=data.all
          
        })
      }
      },
     
    };
</script>

<style>
</style>